<template>
  <el-table
    height="500"
    :data="list"
    :show-header="showHeader"
    :row-class-name="tableRowClassName"
    element-loading-text="Loading"
    :stripe="stripe"
    border
    fit
    :expand="expand"
    @selection-change="handleSelectionChange"
    @row-click="cellClick"
    @select-all="selectAll_click"
    @cell-mouse-enter="showTooltip"
    @cell-mouse-leave="hideTooltip"
    highlight-current-row
  >
    <slot></slot>
  </el-table>
</template>
<script>
export default {
  name: "AutoTable",
  data() {
    return {
      tableHeight: 300,
      minTableHeight: 100,
      otherHeight: 210,
      height:500
    };
  },
  props: {
    list: {
      type: null
    },
    showHeader: {
      type: Boolean,
      default: true
    },
    expand: {
      type: Boolean,
      default: false
    },
    tableRowClassName: {
      type: Function
    },
    stripe: {
      type: Boolean,
      default: true
    }
  },
  computed: {
    browser() {
      return this.$store.state.app.browser;
    }
  },
  watch: {
    "browser.col"(val) {
        this.height =val-450
     // this.autoTableHeight();
    },
    "browser.y"(val) {
      this.height = val-450
      //this.autoTableHeight();
    },
    list() {
     // this.autoTableHeight();
    },
    expand() {
    //  this.autoTableHeight();
    }
  },
  mounted() {
   // this.autoTableHeight();
   setTimeout(() => {
   this.height = window.innerHeight-450
   },100)
 
    window.addEventListener("resize", () => {
      // debugger
     // _this.myChart && _this.myChart.resize();
     this.height = window.innerHeight-450
    })
  },
  activated() {
     // this.height = window.innerHeight-350
   // this.autoTableHeight();
  },
  methods: {
    autoTableHeight() {
      let searchBarHeight = document.getElementById("search-bar")
        ? document.getElementById("search-bar").offsetHeight
        : 0;
      let temp = this.browser.y - this.otherHeight - searchBarHeight;
      this.tableHeight =
        temp < this.minTableHeight || !(this.list && this.list.length > 0)
          ? this.minTableHeight
          : temp;
    },
    handleSelectionChange(val) {
      this.$emit("selection-change", val);
    },
    cellClick(row, column, event) {
      this.$emit("row-click", row, column, event);
    },
    showTooltip(row,column, event) {
      this.$emit("cell-mouse-enter", row,column, event);
    },
    selectAll_click(selection){
       this.$emit("select-all",selection);
    },
    hideTooltip(row,column, event) {
      this.$emit("cell-mouse-leave", row, column, event);
    }
  }
};
</script>
